<template>
    <div class="container">
        <!-- directive 方式 -->
        <h2>directive 方式</h2>
        <div class="images" v-viewer="{ movable: true }">
            <img v-for="src in images" :key="src" :src="src">
        </div>
        <h2>component</h2>
        <!-- component -->
        <viewer :images="images" :v-viewer="imgOptions">
            <img v-for="src in images" :key="src" :src="src">
        </viewer>
        <!-- api -->
        <button type="button" @click="show">Click to show</button>
    </div>
</template>

<script >
//vue 组合式API类型
//https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
//如果没有使用 <script setup>，那么为了开启 props 的类型推导，必须使用 defineComponent()
import { defineComponent, reactive } from 'vue'
export default defineComponent({
    name: 'SetupImageComponent',
    props: {
    },
    setup(props, context) {
        console.log("setup", props, context)
        const images = reactive([
            "https://picsum.photos/200/200",
            "https://picsum.photos/300/200",
            "https://picsum.photos/250/200"
        ])
        const images2 = reactive([
            { originUrl: "https://picsum.photos/200/200" },
            { originUrl: "https://picsum.photos/300/200" },
            { originUrl: "https://tse3-mm.cn.bing.net/th/id/OIP-C.vtf66Jn1w6meNoV70S0n3gHaEK?w=323&h=180&c=7&r=0&o=5&pid=1.7" }
        ])
        const imgOptions = reactive(
            { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
        )
        const show = () => {
            // const viewer = this.$el.querySelector('.images').$viewer
            //   viewer.show()
            // const viewApi = $viewerApi({
            //     options: {
            //         "inline": true,
            //         "button": true,
            //         "navbar": true,
            //         "title": true,
            //         "toolbar": true,
            //         "tooltip": true,
            //         "movable": true,
            //         "zoomable": true,
            //         "rotatable": true,
            //         "scalable": true,
            //         "transition": true,
            //         "fullscreen": true,
            //         "keyboard": true,
            //         "url": "originUrl",
            //         'initialViewIndex': 1
            //     },
            //     images: images2,
            // })
        }
        return {
            images,
            images2,
            imgOptions,
            show
        }
    }
})
</script>
<style scoped>
.container {
    display: flex;
    flex-direction: column;
}
</style>